<template>
	<view>
		<!-- 营地地图 -->
		<!-- <block v-if="hasLocation === true">
			<view class="uni-h2 uni-center uni-common-mt">
				<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
				<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
			</view>
		</block>
		<view class="uni-padding-wrap">
			<view class="uni-btn-v uni-common-mt">
				<button type="primary"@click="openLocation">查看位置</button>
			</view>
		</view> -->
		<view class="uni-common-mt">
			<view>
				<view class="map-wrapper">
					<map :latitude="latitude" scale="8" :longitude="longitude" :markers="markers" :polyline="polyline"></map>
					<view class="info-wrapper">
						<!-- <view class="selectType">
							<view @click="goTo('car')" class="type" :class="active === 'car' ? 'active' : ''">驾车</view>
							<view @click="goTo('walk')" class="type" :class="active === 'walk' ? 'active' : ''">步行</view>
							<view @click="goTo('ride')" class="type" :class="active === 'ride' ? 'active' : ''">骑行</view>
						</view> -->
						<view class="navigatePic" @click="handleNavigate">导航</view>
						<!-- <view v-if="maxDuration && active!=='car'" class="info">
							<text>距离太远，请选择合适的方式前往</text>
						</view>
						<view v-else class="info">
							<text>{{duration | formatTime}}小时</text>
							<text>{{distance | filterDistance}}公里</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import amapFile from './amap-wx.js';
	var util = require('../../common/util.js');
	var formatLocation = util.formatLocation;
	// #ifdef APP-PLUS
	import permision from "@/common/permission.js"
	// #endif
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				title: 'getLocation',
				hasLocation: false,
				location: {},
				type: '',

				title: 'map',
				latitude: 29.72,
				longitude: 106.63,
				key: '55d7c33d0ea584f8da4af4a79cebd89b',
				distance: 0,
				duration: 0,
				maxDuration: false,
				curentLatitude: '',
				curentLongitude: '',
				active: 'car',
				polyline: null,
				markers: []
			}
		},
		onLoad() {
			//页面加载查询所有营地坐标，并填充到markers
			this.selectAllCoordinate()
			// this.getLocation();
			// var _this = this;
			// setTimeout(function(t) {
			// 	_this.openLocation();
			// }, 3000);

			console.log('amapFile', amapFile)
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.markers[1].latitude = res.latitude;
					this.markers[1].longitude = res.longitude;
					this.currentLatitude = res.latitude;
					this.currentLongitude = res.longitude;
					console.log(res)
				},
				fail: function() {
					console.log('fail')
				},
				complete: () => {
					this.goTo('car')
				}
			});

		},
		methods: {
			selectAllCoordinate() {
				uni.request({
					url: this.webUrl+'camp/selectAllCoordinate',
					success: (res) => {
						// this.cars = res.data.list;
						console.log(res)
						for (var i = 0; i < res.data.list.length; i++) {
							var c = res.data.list[i];
							this.markers.push({
								latitude: c.latitude,
								longitude: c.longitude,
								iconPath: '../../static/location.jpg',
								title: '您的位置',
								width: 40,
								height: 50,
								label: {
									content: c.campName,
									color: '#F76350',
									bgColor: '#fff',
									padding: 5,
									borderRadius: 4
								},
								callout: {
									content: c.address,
									color: '#F76350',
									fontSize: 16,
									iconPath: '../../static/home.png'
								}
							});
						}
						console.log(this.markers)
					},
				});
			},
			// openLocation: function() {
			// 	console.log(this.location)
			// 	// 这是假数据
			// 	var name = '重庆市';
			// 	var address = '重庆市渝北区';
			// 	var la = this.location.latitude[0] + "." + this.location.latitude[1];
			// 	var lo = this.location.longitude[0] + "." + this.location.longitude[1];
			// 	console.log(la + '----' + lo);
			// 	this.latitude = la;
			// 	this.longitude = lo;
			// 	uni.openLocation({
			// 		longitude: Number(lo),
			// 		latitude: Number(la),
			// 		name: name,
			// 		address: address
			// 	})
			// },
			// togglePopup(type) {
			// 	this.type = type;
			// },
			// showConfirm() {
			// 	this.type = 'showpopup';
			// },
			// hideConfirm() {
			// 	this.type = '';
			// },
			// async getLocation() {
			// 	// #ifdef APP-PLUS
			// 	let status = await this.checkPermission();
			// 	if (status !== 1) {
			// 		return;
			// 	}
			// 	// #endif
			// 	// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ
			// 	let status = await this.getSetting();
			// 	if (status === 2) {
			// 		this.showConfirm();
			// 		return;
			// 	}
			// 	// #endif

			// 	this.doGetLocation();
			// },
			// doGetLocation() {
			// 	uni.getLocation({
			// 		success: (res) => {
			// 			this.hasLocation = true;
			// 			this.location = formatLocation(res.longitude, res.latitude);
			// 		},
			// 		fail: (err) => {
			// 			// #ifdef MP-BAIDU
			// 			if (err.errCode === 202 || err.errCode === 10003) { // 202模拟器 10003真机 user deny
			// 				this.showConfirm();
			// 			}
			// 			// #endif
			// 			// #ifndef MP-BAIDU
			// 			if (err.errMsg.indexOf("auth deny") >= 0) {
			// 				uni.showToast({
			// 					title: "访问位置被拒绝"
			// 				})
			// 			} else {
			// 				uni.showToast({
			// 					title: err.errMsg
			// 				})
			// 			}
			// 			// #endif
			// 		}
			// 	})
			// },
			// getSetting: function() {
			// 	return new Promise((resolve, reject) => {
			// 		uni.getSetting({
			// 			success: (res) => {
			// 				if (res.authSetting['scope.userLocation'] === undefined) {
			// 					resolve(0);
			// 					return;
			// 				}
			// 				if (res.authSetting['scope.userLocation']) {
			// 					resolve(1);
			// 				} else {
			// 					resolve(2);
			// 				}
			// 			}
			// 		});
			// 	});
			// },
			// openSetting: function() {
			// 	this.hideConfirm();
			// 	uni.openSetting({
			// 		success: (res) => {
			// 			if (res.authSetting && res.authSetting['scope.userLocation']) {
			// 				this.doGetLocation();
			// 			}
			// 		},
			// 		fail: (err) => {}
			// 	})
			// },
			// async checkPermission() {
			// 	let status = permision.isIOS ? await permision.requestIOS('location') :
			// 		await permision.requestAndroid('android.permission.ACCESS_FINE_LOCATION');

			// 	if (status === null || status === 1) {
			// 		status = 1;
			// 	} else if (status === 2) {
			// 		uni.showModal({
			// 			content: "系统定位已关闭",
			// 			confirmText: "确定",
			// 			showCancel: false,
			// 			success: function(res) {}
			// 		})
			// 	} else if (status.code) {
			// 		uni.showModal({
			// 			content: status.message
			// 		})
			// 	} else {
			// 		uni.showModal({
			// 			content: "需要定位权限",
			// 			confirmText: "设置",
			// 			success: function(res) {
			// 				if (res.confirm) {
			// 					permision.gotoAppSetting();
			// 				}
			// 			}
			// 		})
			// 	}

			// 	return status;
			// },
			// clear: function() {
			// 	this.hasLocation = false
			// },
			// 第二次
			handleNavigate() {
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					name: '重庆市',
					address: '江北区红旗河沟',
					success: function() {
						console.log('success');
					}
				});
			},
			drawPolyline(self, color) {
				return {
					origin: this.longitude + ',' + this.latitude,
					destination: this.currentLongitude + ',' + this.currentLatitude,
					success(data) {
						var points = [];
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							var steps = data.paths[0].steps;
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
						}
						self.distance = data.paths[0].distance;
						console.log(data.paths[0].distance / 1000 > 50)
						console.log(self.active !== 'car')
						if (data.paths[0].distance / 1000 > 50) {
							self.maxDuration = true;
						} else {
							self.maxDuration = false;
						}
						self.duration = parseInt(data.paths[0].duration / 60),
							self.polyline = [{
								points: points,
								color: color,
								width: 6,
								arrowLine: true
							}]

					},
					fail(e) {
						console.log(e)
					},
					complete() {
						console.log('complate')
					}
				}
			},
			getPolyline(_type) {
				var amap = new amapFile.AMapWX({
					key: this.key
				});
				var self = this;
				switch (_type) {
					case 'car':
						amap.getDrivingRoute(this.drawPolyline(this, "#0091ff"));
						break;
					case 'walk':
						if (this.maxDuration) {
							return false;
						}
						amap.getWalkingRoute(this.drawPolyline(this, "#1afa29"));
						break;
					case 'ride':
						if (this.maxDuration) {
							return false;
						}
						amap.getRidingRoute(this.drawPolyline(this, "#1296db"));
						break;
					default:
						return false;
				}
			},
			goTo(_type) {
				this.getPolyline(_type);
				this.active = _type;
			}
		},
		filters: {
			filterDistance(val) {
				return (val / 1000).toFixed(2)
			},
			formatTime(val) {
				return (val / 60).toFixed(2)
			}
		}
	}
</script>

<style>
	.popup-view {
		width: 500rpx;
	}

	.popup-title {
		display: block;
		font-size: 16px;
		line-height: 3;
		margin-bottom: 10px;
		text-align: center;
	}

	.popup-buttons button {
		margin-left: 4px;
		margin-right: 4px;
	}

	.map-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.map-wrapper map {
		width: 100%;
		height: 100%;
	}

	.info-wrapper {
		background: #fff;
		height: 150upx;
		display: flex;
		flex-direction: column;
	}

	.selectType {
		position: relative;
		display: flex;
	}

	.selectType view {
		flex: 1;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
	}

	.type {
		border-bottom: 1px solid #ccc;
	}

	.type:last-child {
		border-right: none;
	}

	.type.active {
		color: #10D5AF;
		border-color: #10D5AF;
	}

	.navigatePic {
		position: absolute;
		right: 10upx;
		background: #10D4AF;
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		bottom: 40upx;
		text-align: center;
		line-height: 100upx;
		color: #fff;
		font-weight: bold;
	}

	.info {
		display: flex;
		flex-direction: row;
		line-height: 80upx;
		font-size: 32upx;
		font-weight: bold;
		padding: 20upx;
	}

	.info text {
		margin-right: 40upx;
	}
</style>
